<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--流水信息-->
			<view class="detail-item">
				<uni-section :title="`${title}信息`" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">
						流水ID：
						<text>{{info.id}}</text>
					</view>
					<view class="detail-text">
						仓库名称：
						<text>{{info.warehouseName}}</text>
					</view>
					<view class="detail-text">
						商品名称：
						<text>{{info.productName}}</text>
					</view>
					<view class="detail-text">
						商品编码：
						<text>{{info.productCode}}</text>
						<text class="detail-text-copy" @click="copyText(info.productCode)">复制</text>
					</view>
					<view class="detail-text">
						批次号：
						<text>{{info.batchNumber}}</text>
						<text class="detail-text-copy" @click="copyText(info.batchNumber)">复制</text>
					</view>
					<view class="detail-text">
						规格单位：
						<text>{{info.productUnit}}</text>
					</view>
					<view class="detail-text">
						库存：
						<text>{{info.realtimeStock}}</text>
					</view>
					<view class="detail-text">
						流水数量：
						<uni-tag size="small"  :class="`record-type-${info.recordType}`" :text="`${info.recordType === 1 ? '-' : ''}${info.number}`" />
					</view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:warehouseRecord:purchasePrice'])">
						采购价：
						<text>{{info.purchasePrice}}</text>
					</view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:warehouseRecord:purchasePrice'])">
						采购金额：
						<text>{{purchaseMoney}}</text>
					</view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:warehouseRecord:sellPrice'])">
						销售价：
						<text>{{info.sellPrice}}</text>
					</view>
					<view class="detail-text" v-if="checkPermi(['zhouyz:warehouseRecord:sellPrice'])">
						销售金额：
						<text>{{sellMoney}}</text>
					</view>
					<view class="detail-text">
						生产日期：
						<text>{{info.productionDate}}</text>
					</view>
					<view class="detail-text">
						过期时间：
						<text>{{info.expireDate}}</text>
					</view>
					<view class="detail-text">
						出货方：
						<text>{{info.relationStoreName}}</text>
					</view>
					<view class="detail-text">
						单据类型：
						<uni-tag v-if="info.relationType === 5 && info.recordType === 1" size="small"  class="relation-type-51" text="报损单据" />
						<uni-tag v-else-if="info.relationType === 5 && info.recordType === 0" size="small"  class="relation-type-50" text="报溢单据" />
						<uni-tag v-else size="small" :class="`relation-type-${info.relationType}`" :text="arrText(warehouseRecordRelationTypeList, info.relationType)" />
					</view>
					<view class="detail-text">
						关联单据号：
						<text>{{info.relationNum}}</text>
						<text class="detail-text-copy" @click="copyText(info.relationNum)">复制</text>
						<text v-if="checkPermi(['zhouyz:purchaseOrder:list']) && info.relationType === 0" class="detail-text-copy" @click="showOrder(`/pages/purchase/purchaseOrderDetail?id=${info.relationId}`)">查看</text>
						<text v-else-if="checkPermi(['zhouyz:warehouseAllocation:list']) && info.relationType === 1" class="detail-text-copy" @click="showOrder(`/pages/warehouse/warehouseAllocationInfo?id=${info.relationId}`)">查看</text>
						<text v-else-if="checkPermi(['zhouyz:order:list']) && info.relationType === 2" class="detail-text-copy" @click="showOrder(`/pages/order/orderDetail?id=${info.relationId}`)">查看</text>
						<text v-else-if="checkPermi(['zhouyz:purchaseReturn:list']) && info.relationType === 3" class="detail-text-copy" @click="showOrder(`/pages/purchase/purchaseReturnDetail?id=${info.relationId}`)">查看</text>
						<text v-else-if="checkPermi(['zhouyz:warehouseStorageTake:list']) && info.relationType === 4" class="detail-text-copy" @click="showOrder(`/pages/warehouse/warehouseStorageTakeDetail?id=${info.relationId}`)">查看</text>
						<text v-else-if="checkPermi(['zhouyz:warehouseStorageTake:lossAndOverflow']) && info.relationType === 5" class="detail-text-copy" @click="showOrder(`/pages/warehouse/lossAndOverflowDetail?id=${info.relationId}`)">查看</text>
						<text v-else-if="checkPermi(['zhouyz:warehouseMix:list']) && info.relationType === 6" class="detail-text-copy" @click="showOrder(`/pages/warehouse/warehouseMixDetail?id=${info.relationId}`)">查看</text>
					</view>
					<view class="detail-text">
						订单时间：
						<text>{{info.recordTime}}</text>
					</view>
					<view class="detail-text">
						操作账号：
						<text>{{info.createBy}}</text>
					</view>
					<view class="detail-text">
						操作时间：
						<text>{{info.createTime}}</text>
					</view>
					<view class="detail-text">
						说明：
						<text>{{info.remark}}</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { warehouseRecordDetail } from "@/api/erp_api/warehouse"
import { copyText, arrText, previewImg, getDateDiff } from '@/utils/ty.js';
import useUserStore from '@/store/modules/user'
import { warehouseRecordTypeList, warehouseRecordRelationTypeList } from '@/utils/config.js'

	const userStore = useUserStore()
	const title = ref('流水')
	onLoad((option) => {
		if (option.id) {
			id.value = option.id
			getDetail()
		}
		switch (option.type) {
			case '1': 
				title.value = '入库单'
				break;
			case '2':
				title.value = '出库单'
				break;
			default:
				title.value = '流水'
		}
		uni.setNavigationBarTitle({
			title: `${title.value}详情`
		})
	})
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		warehouseRecordDetail(params).then(res => {
			info.value = res.data || {}
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 查看订单
	const showOrder = (url) => {
		uni.navigateTo({
			url
		})
	}
	
	// 金额
	const purchaseMoney = computed(() => {
		return info.value.purchasePrice ? info.value.purchasePrice * info.value.number : 0
	})
	
	const sellMoney = computed(() => {
		return info.value.sellPrice ? info.value.sellPrice * info.value.number : 0
	})
	
</script>

<style scoped lang="scss">
	.record-type-0 {
		background-color: #e7faf0;
		border-color: #d0f5e0;
		color: #13ce66;
		padding: 2px 6px !important;
	}
	.record-type-1 {
		background-color: #ffeded;
		border-color: #ffdbdb;
		color: #ff4949;
		padding: 2px 6px !important;
	}
</style>
